<template>
    <div>
        <div>
            <van-nav-bar :title="food.foodname" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="detail">
            <img :src="getImg(food.pic)">
            <div><h2>{{ food.foodname }}</h2></div>
            <div style="font-size: 25px; color: #e00;">￥{{ food.price }}</div>
        </div>
        <div>
            <div class="comment">
                <div class="comment-title">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item title="用户评论" name="1">
                            <van-card v-for="value in comments" :key="value.id" :desc="value.content" :title="value.username">
                                <template #num>
                                    {{ value.comment_time }}
                                </template>
                                <template #price>
                                    ￥{{ value.sum }}
                                </template>
                            </van-card>
                        </van-collapse-item>    
                    </van-collapse>
                </div>
            </div>
        </div>
        <div class="footer">
            <van-action-bar>
                <van-action-bar-icon icon="shop-o" text="首页" color="#ee0a24" to="/" />
                <van-action-bar-icon icon="cart-o" text="购物车" to="/card" />
                <van-action-bar-icon :icon="[collected?icon.name2:icon.name ]" text="收藏" color="#ff5000" @click="onCollect" />
                <van-action-bar-button type="warning" text="加入购物车" @click="onInsert" />
                <van-action-bar-button type="danger" text="立即购买" :to="{path: '/buy1', query: {foodId: food.food_id}}" />
            </van-action-bar>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getFoodsDetailApi, insertCartApi,getFoodsCommApi,
    userCollectFoodApi,isCollectedApi } from '@/api';
import { useCounterStore } from '@/stores/counter'
import { useRoute,useRouter } from 'vue-router';
import { showSuccessToast, showFailToast } from 'vant';
const store = useCounterStore();
const route = useRoute();
const router = useRouter();
const food = ref({});
const comments = ref([]);
const icon =ref({name:'like-o',name2:'like'})
const collected=ref(false);
const activeNames = ref(['1']);
const getImg = e => `http://172.17.18.240:8080/nfood${e}`;

const getFoodDetail = async e => {
    const res = await getFoodsDetailApi(e);
    food.value = res;
};
const getFoodComm = async e => {
    const res = await getFoodsCommApi(e);
    comments.value.push(...res)
};
const insertCart = async e => {
    const res = await insertCartApi(e);
    if (res.success === '0') {
        showFailToast('添加失败');
    } if (res.success === '1') {
        showSuccessToast('添加成功');
    }
}
const onInsert = () => {
    insertCart({
        userId: store.userId,
        foodId: food.value.food_id
    })
}
const isCollected = async e => {
    const res = await isCollectedApi(e);
    if(res.collected==='0'){
      collected.value=false;
    }
    if(res.collected==='1'){
      collected.value=true;
    }
  };
  const userCollectFood = async e => {
    const res = await userCollectFoodApi(e);
    collected.value=!collected.value;
    // list.value.push(...res);
  };
  const onCollect =()=>{
  userCollectFood({userId:store.userId,foodId:route.query.foodId})
}
// DetailView.vue
const onClickLeft = () => {
router.back()
};
onMounted(() => {
    getFoodDetail(route.query.foodId);
    getFoodComm(route.query.foodId);
    isCollected({userId:store.userId,id:route.query.foodId,flag:1})
});

</script>

<style scoped>
.detail{
    width: 90%;
    margin: auto;
    border-radius: 20px;
}
.detail img{
    width: 100%;
    height: 300px;
    border-radius: 20px;
}
.van-action-bar{
    width: 100%;
}
.van-card {
  background: #fff;
  border-bottom:2px solid #eee   ;
}
:deep(.van-card__price) {
    color: #f00;
  font-weight: normal;
  font-size: 16px;
}

</style>